<template lang="pug">
  el-scrollbar(class="components-area-scrollbar" wrapClass="scrollbar-wrapper")
    .components-area
      .component-type
        span(v-for="item in componentTypeArr" class="component-type-item" @click="componentTypeShow=item.type" :class="componentTypeShow===item.type?'component-type-active':''") {{item.label}}
      div(class="base-component-show" v-if="componentTypeShow==='baseComponent'")
        //- el-input(style="padding:20px 10px;box-sizing:border-box" placeholder="输入组件名搜索" v-model="pluginName" @keyup.enter.native="basePluginDefsSearch")
        //-   el-button(slot="append" icon="el-icon-search" @click="basePluginDefsSearch")
        el-collapse(v-model="activeNames")
          el-collapse-item(v-for="item in basePluginDefs" :title="item.type" :name="item.type" :key="item.type")
            draggable(class="clearfix" :clone="cloneData" v-model="item.list" :options="dragOptions1")
              div(v-for="one in item.list" class="plugin-defs-item compontent-item" :class="{'find-plugin-defs-item':one.label.indexOf(pluginNameCached)>-1&&pluginNameCached}")
                .compont-icon
                  svg-icon(:icon-class="`组件${one.label}`")
                p.compont-name(:title="one.label") {{one.label}}
      div(class="share-component-show" v-if="componentTypeShow==='shareComponent'")
        //- el-input(style="padding-bottom:10px;" v-model="shareName" placeholder="输入组件名搜索" @keyup.enter.native="getSharePluginDefs")
        //-   el-button(slot="append" icon="el-icon-search" @click="getSharePluginDefs")
        draggable(class="clearfix" :clone="cloneData" v-model="sharePluginDefs" :options="dragOptions1" v-loading="shareLoading" element-loading-text="拼命加载中")
          div(v-for="one in sharePluginDefs" class="plugin-defs-item compontent-item")
            .compont-icon
              svg-icon(class="share-icon" icon-class="组件")
              svg-icon(class="delete-icon" icon-class="删除" title="删除" @click="deleteSharePluginDefs(one)")
            p.compont-name(:title="one.shareName") {{one.shareName}}
</template>
<script>
import draggable from 'vuedraggable'
import plugin from '../formPlugins/pluginDefs/index'
import _ from 'lodash'
import { addFunctionKey, addId } from '../formPlugins/utils/drag.js'
import * as api from '../formPlugins/service'

export default {
  components: { draggable },
  props: ['designDeviceChoose'],
  data() {
    return {
      componentTypeArr: [{ type: 'baseComponent', label: '基础组件' }],
      componentTypeShow: 'baseComponent', // 最上面的类型
      basePluginDefs: [], // 基础控件数组
      sharePluginDefs: [], // 共享控件数组
      activeNames: [], // 左边折叠区域
      shareName: '',
      pluginName: '',
      pluginNameCached: '',
      shareLoading: false

    }
  },
  methods: {
    cloneData(value) {
      let valueClone = _.cloneDeep(value)
      if (!('config' in valueClone)) {
        valueClone.config = valueClone.initConfigDataFn()
      }
      addId(valueClone)
      if ('shareName' in valueClone) {
        delete valueClone.shareName
      }
      // if (!('pluginEvent' in valueClone.config)) {
      //   valueClone.config.pluginEvent = valueClone.event || []
      // }
      return _.cloneDeep(valueClone)
    },
    deleteSharePluginDefs(one) {
      this.$confirm('删除该共享组件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteShareComponent(one.shareName).then(_ => {
          this.$message.success('共享组件删除成功!')
          this.getSharePluginDefs()
        })
      }).catch(() => {
        this.$message.info('取消删除!')
      })
    },
    getSharePluginDefs() {
      this.shareLoading = true
      // api.getShareComponentList('', '', { name: this.shareName }).then(data => {
      //   let oData = data.rows
      //   _.forEach(oData, one => {
      //     one.component = one.component && JSON.parse(one.component)
      //   })
      //   let deviceShareComponents = _.filter(oData, one => {
      //     return one && one.component.device === this.designDeviceChoose
      //   })
      //   this.sharePluginDefs = deviceShareComponents.map(one => ({ name: one.name, components: one.component }))
      //   _.forEach(this.sharePluginDefs, item => {
      //     if (item) {
      //       addFunctionKey(item.components)
      //       item.components.shareName = item.name
      //     }
      //   })
      //   this.sharePluginDefs = _.map(this.sharePluginDefs, 'components')
      // }).finally(() => {
      //   this.shareLoading = false
      // })
    },
    getBasePluginDefs() {
      // 基础组件
      let pluginDefs
      if (this.designDeviceChoose === 'PC') {
        pluginDefs = plugin.PC
      } else {
        pluginDefs = plugin.APP
      }
      let groupPluginDefs = _.groupBy(pluginDefs, 'interactionTypeCn')
      this.basePluginDefs = [] // [{type:'布局组件',list:[]}]
      this.activeNames = []
      for (let key in groupPluginDefs) {
        this.activeNames.push(key)
        let order = groupPluginDefs[key][0].interactionTypeOrder
        this.basePluginDefs.push({ type: key, order: order, list: _.sortBy(groupPluginDefs[key], 'order') })
      }
      this.basePluginDefs = _.sortBy(this.basePluginDefs, ['order'])
    },
    basePluginDefsSearch() {
      this.pluginNameCached = this.pluginName
      let activeNames = []
      _.forEach(this.basePluginDefs, one => {
        _.forEach(one.list, item => {
          if (item.label.indexOf(this.pluginName) > -1 && activeNames.indexOf(one.type) === -1) {
            activeNames.push(one.type)
          }
        })
      })
      if (activeNames.length) {
        this.activeNames = activeNames
      }
    }
  },
  created() {
    // 左边组件拖拽
    this.dragOptions1 = {
      animation: 0,
      ghostClass: 'ghosta',
      // 分组
      group: {
        name: 'templateComponts',
        pull: 'clone',
        revertClone: false,
        put: false
      },
      // 禁止拖动排序
      sort: false
    }
    this.getBasePluginDefs()
    this.getSharePluginDefs()
  }
}
</script>
<style lang="scss" scoped>
  .components-area {
    width: 100%;
    min-height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    // overflow: auto;
    .component-type {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      font-size: 14px;
      color: #333;
      background: #DFE5EB;
      font-weight: 400;
      .component-type-item {
        margin-right: 12px;
        cursor: pointer;
      }
      .component-type-active {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .share-component-show {
      padding: 20px 10px;
    }
    .compontent-item {
      width: 50%;
      float: left;
      text-align: center;
      font-size: 14px;
      border: 1px solid transparent;
      box-sizing: border-box;
      margin-bottom: 10px;
      .delete-icon {
        display: none;
      }
      .share-icon {
        display: inline;
      }
      &:hover {
        background: rgba(0, 97, 255, 0.08);
        border: 1px solid #4587F3;
        .delete-icon {
          display: inline;
        }
        .share-icon {
          display: none;
        }
      }
      .compont-icon {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        margin: auto;
        color: #2D77E6;
      }
      .compont-name {
        margin: 0;
        line-height: 30px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

    }
    .find-plugin-defs-item {
      background: rgba(0, 97, 255, 0.08);
      border: 1px solid #4587F3;
    }
  }
</style>
<style lang="scss">
  .components-area-scrollbar {
    width: 100%;
    height: 100%;
    .el-scrollbar__wrap {
      width: 217px;
      // width:100%;
      overflow-x: hidden !important;
      .el-scrollbar__view {
        width: 200px;
      }
    }
    .el-scrollbar__view {
      height: 100%;
    }
  }

  .base-component-show {
    .el-collapse-item__header {
      padding: 0 20px;
      background: #F5F7FA !important;
      color: #333 !important;
      font-weight: bold;
      font-size: 15px !important;
      // border:none;
    }
    .el-collapse-item__wrap {
      border: none !important;
      .el-collapse-item__content {
        padding: 20px 10px !important;
        border: none !important;
      }
    }
  }
</style>
